/*
*   @Description:
*   @Author:lxy
*   @Date:2023-03-23 10:23
*/
<template>
  <!-- 头部模块 -->
  <div class="headerPage">
        <ul class="left">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class="title">
            <span>智慧养老社区平台系统</span>
        </div>
        <ul class="right">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</template>

<script>
export default {
  name: "headerPage",
  data() {
    return {};
  },
};
</script>

<style scoped lang="less">
@font-face {
  font-family: "液晶数字字体";
  src: url("./fonts/液晶数字字体.TTF");
}
// 头部模块
.headerPage {
    width: 75%;
    height: 10%;
    margin: auto;
    >div {
        float: left;
    }
    .title {
        height: 100%; 
        width: 40%;
        text-align: center;
        color: #fff;
        
        display: table;
        opacity: 0;
        animation: zoomIn 0.5s linear forwards 0.8s;
        span {
            font-size: 38px;
            letter-spacing: 10px;
            display: table-cell;
            vertical-align: middle;
        }
    }
    .left ,.right{
        width: 30%;
        height: 100%;
        float: left;
        li {
            width: 56px;
            height:16px;
            background-color: #02b687;
            opacity: 0;
            margin: 0 2%;
            float: left;
            border-radius:16px;
            margin-top: 10%;
        }
    }
    .left {
        li:nth-of-type(1){
            animation: show1 0.2s linear forwards;
        }
        li:nth-of-type(2){
            animation: show2 0.2s linear forwards 0.2s;
        }
        li:nth-of-type(3){
            animation: show3 0.2s linear forwards 0.4s;
        }
        li:nth-of-type(4){
            animation: show4 0.2s linear forwards 0.6s;
        }
    }
    .right {
        li {
            float: right;
        }
        li:nth-of-type(1){
            animation: show1 0.2s linear forwards;
        }
        li:nth-of-type(2){
            animation: show2 0.2s linear forwards 0.2s;
        }
        li:nth-of-type(3){
            animation: show3 0.2s linear forwards 0.4s;
        }
        li:nth-of-type(4){
            animation: show4 0.2s linear forwards 0.6s;
        }
    }
}

// 开头显示动画
@keyframes show1{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.25;
    }
}

@keyframes show2{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.5;
    }
}

@keyframes show3{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 0.75;
    }
}

@keyframes show4{
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
@keyframes zoomIn{
    0% {
        opacity: 0;
        -webkit-transform: scale3d(0.3, 0.3, 0.3);
        transform: scale3d(0.3, 0.3, 0.3);
    }
    
    100% {
        opacity: 1;
    }
}

</style>
